$bodybg:#fff;
$color-defult: #fff;
$color-primary: #17b3a3;
$color-sucess: #67c23a;
$color-info: #909399;
$color-warning: #e6a23c;
$color-danger: #f56c6c;
$textcolor:#909399;
$windwidth:100%;
$asidewidth:230px;
$asideinnerwidth:250px;
$navheight:50px;
$minisidebarwidth:64px;
$minisideinnerbarwidth:84px;
$asidebg:#263238;
$asideopenbg:#202b30;
$asidehoverbg:#2b373d;
$asidehovercolor:#c5cbcf;


// 公共属性
body {
    font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,\\5FAE\8F6F\96C5\9ED1,Arial,sans-serif;
    font-size: 14px;
    line-height: 1.15;
    color: $textcolor;
    background-color: $bodybg;
    margin: 0px;
    overflow-x: hidden;
    overflow-y: auto;
}

blockquote, body, button, dd, dl, dt, form, h1, h2, h3, h4, h5, h6, input, li, ol, p, pre, td, textarea, th, ul{
    list-style: none;
    padding: 0px;
    margin: 0px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

a{
    text-decoration: none;
    color: $textcolor;
}

*, :after, :before {
    box-sizing: border-box;
}

.margin-r-auto{
    margin-right: auto !important;
}
.ml--15{
    margin-left: -15px !important;
}

hr{
    height: 1px;
    border: 0;
    clear: both;
    background-color: #e6e6e6;
}

// 图标字体
@font-face {font-family: 'baui-icon';
    src: url('../../../font/icomoon.eot');
    src: url('../../../font/icomoon.eot') format('embedded-opentype'),
    url('../../../font/icomoon.svg') format('svg'),
    url('../../../font/icomoon.woff') format('woff'),
    url('../../../font/icomoon.ttf') format('truetype');
}

.baui-icon {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: "baui-icon" !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: baseline;
    display: inline-block;
}
.baui-icon-menufold:before {
    content: "\e668";
}
.baui-icon-arrow:before {
    content: "\e603";
}

.baui-icon-left:before{
    content: "\e603"
}
.baui-icon-right:before{
    content: "\e602"
}
.baui-icon-loading:before{
    content: "\e63e";
}
.baui-icon-filter:before{
    content: "\e60a";
}

// 主层架构
.baui-wrapper{
    position: relative;
    width: $windwidth;
    overflow: hidden;
}

//顶部导航
nav.baui-nav{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: stretch;
    align-items: stretch;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
    height: $navheight;
    .baui-nav-header{
        position: fixed;
        width: $asidewidth;
        height: $navheight;
        background: #000000;
        z-index: 1020;
        .logo{
            -webkit-transition: width .3s ease-in-out;
            -o-transition: width .3s ease-in-out;
            transition: width .3s ease-in-out;
            display: block;
            float: left;
            height: $navheight;
            font-size: 20px;
            line-height: $navheight;
            text-align: center;
            width: $asidewidth;
            font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
            padding: 0 15px;
            font-weight: 300;
            overflow: hidden;
            color: #fff;
            .logo-small{
                display: none;
            }
            .logo-large{
                display: block;
            }
        }
    }
    .baui-nav-body{
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 1;
        flex: 1;
        background-color: #fff;
        overflow: hidden;
        margin-left: $asidewidth;
        padding-right:15px;
        .baui-navbar-menu{
            list-style: none;
            margin: 0;
            padding-left: 0;
            .baui-navbar-item {
                color: $textcolor;
                height: 50px;
                line-height: 50px;
                float: left;
            }
            .baui-navbar-item>div>a,
            .baui-navbar-item>a {
                display: block;
                padding: 0 20px;
            }
            .baui-navbar-avatar img{
                width: 30px;
                height: 30px;
                border-radius: 50%;
                vertical-align: middle;
            }
        }
    }
}

//侧边栏动画
.baui-nav-header,
.baui-nav-body,
.baui-sidebar,
.baui-sidebar-inner,
.baui-menu,
.baui-submenu,
.baui-submenu-title,
.baui-content,
.menu-icon-show{
    transition: display .3s,left .3s,width .3s,margin .3s,font-size .3s;
}

//侧边栏导航
aside.baui-sidebar{
    position: fixed;
    top: $navheight;
    left: 0;
    bottom: 0;
    z-index: 1020;
    width: $asidewidth;
    background-color: #fff;
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    .baui-sidebar-inner{
        position: relative;
        z-index: 1;
        width: $asideinnerwidth;
        height: 100%;
        padding-bottom: 15px;
        overflow-x: hidden;
        overflow-y: scroll;
        .baui-menu{
            position: relative;
            width: $asidewidth;
            .baui-submenu{
                .baui-submenu-title{
                    position: relative;
                    cursor:pointer;
                    display: block;
                    height: 56px;
                    line-height: 56px;
                    list-style: none;
                    white-space: nowrap;
                    .menu-icon-arrow{
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        margin-top: -7px;
                        transition: transform 0.3s;
                        font-size: 12px;
                    }
                }
            }
            .baui-submenu-title:hover{
                background: $asidehoverbg;
                color: $asidehovercolor;
            }
            .baui-submenu.is-open>.baui-menu{
                background: $asideopenbg;
            }
            .baui-submenu.is-open>a,
            .baui-submenu.is-active>a{
                color: #ffffff;
            }
            .baui-submenu.is-open>a{
                .menu-icon-arrow{
                    transform: rotate(-90deg);
                }
            }
            .baui-submenu.is-active a.is-active{
                color: #ffffff;
            }
        }
    }
}

//主题
.theme-defalut{
    nav.baui-nav{
        .baui-nav-header{
            background: $color-primary;
        }
    }
    aside.baui-sidebar{
        background: rgb(48, 65, 86);
    }
    @media (min-width: 768px){
        a:hover{
            color: $color-primary;
        }
    }
}

//pc端小sidebar样式
.baui-wrapper.sidebar-collapse{
    //顶部导航
    .baui-nav{
        .baui-nav-header{
            width: $minisidebarwidth;
            .logo{
                width: $minisidebarwidth;
            }
            .logo-small{
                display: block
            }
            .logo-large{
                display: none
            }
        }
        .baui-nav-body{
            margin-left: $minisidebarwidth;
        }
    }
    //asidebar
    .baui-sidebar{
        width: $minisidebarwidth;
        .baui-sidebar-inner{
            width: $minisideinnerbarwidth;
            

            .baui-menu>.baui-submenu .baui-menu{
                display: none;
            }
            .baui-submenu-title{
                width: $minisidebarwidth;
                margin-right: 0;
            }
            .baui-menu .baui-submenu-title span,
            .baui-menu .baui-submenu-title .menu-icon-arrow{
                display: none;
            }
            .baui-menu .baui-submenu-title .menu-icon-show{
                font-size: 24px;
            }
            ul,li{
                width: $minisidebarwidth;
            }
        }
    }
    //content
    .baui-content{
        margin-left: $minisidebarwidth;
    }
}

//手机端样式
@media (max-width: 767px){
    .baui-hide-xs{
        display: none !important;
    }
    .baui-wrapper{
        .baui-content{
            margin-left: 0px;
        }
        .baui-nav{
            .baui-nav-body{
                margin-left: 0px;
            }
            .baui-nav-header{
                -webkit-transform: translate(-$asidewidth, 0);
                -ms-transform: translate(-$asidewidth, 0);
                -o-transform: translate(-$asidewidth, 0);
                transform: translate(-$asidewidth, 0);
            }
        }
        .baui-sidebar{
            -webkit-transform: translate(-$asidewidth, 0);
            -ms-transform: translate(-$asidewidth, 0);
            -o-transform: translate(-$asidewidth, 0);
            transform: translate(-$asidewidth, 0);
        }
        
    }
    .baui-wrapper.sidebar-open{
        .baui-nav{
            .baui-nav-header{
                -webkit-transform: translate(0, 0);
                -ms-transform: translate(0, 0);
                -o-transform: translate(0, 0);
                transform: translate(0, 0);
            }
            .baui-nav-body{
                -webkit-transform: translate(230px, 0);
                -ms-transform: translate(230px, 0);
                -o-transform: translate(230px, 0);
                transform: translate(230px, 0);
            }
        }
        .baui-sidebar{
            -webkit-transform: translate(0, 0);
            -ms-transform: translate(0, 0);
            -o-transform: translate(0, 0);
            transform: translate(0, 0);
        }

        .baui-content{
            -webkit-transform: translate(230px, 0);
            -ms-transform: translate(230px, 0);
            -o-transform: translate(230px, 0);
            transform: translate(230px, 0);
        }
    }
    .baui-sidebar,
    .baui-nav-header,
    .baui-nav-body,
    .baui-content{
        -webkit-transition: -webkit-transform .3s ease-in-out,width .3s ease-in-out;
        -moz-transition: -moz-transform .3s ease-in-out,width .3s ease-in-out;
        -o-transition: -o-transform .3s ease-in-out,width .3s ease-in-out;
        transition: transform .3s ease-in-out,width .3s ease-in-out;
    }
}

div.baui-content{
    margin-left: 230px;
    padding-top: 50px;
    z-index: 998;
    width: auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #f1f4f5;
    min-height: calc(100vh);
    //面包屑
    .baui-breadcrumb{
        border-radius: 0;
        margin-bottom: 0;
        background: #fff;
        box-shadow: 0 6px 4px -5px #ddd;
        padding: 10px 20px;
        li{
            height: 24px;
            line-height: 24px;
            display: inline-block;
        }
        li+:before{
           display: inline-block;
            padding-right: .5rem;
            padding-left: .5rem;
            color: #6c757d;
            content: "/"; 
        }
    }
}
//内容
#content{
    padding: 15px;
}

.baui-tab{
    border-radius: 4px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    overflow: hidden;
    color: #303133;
    transition: .3s;
    .baui-tab-wrap{
        overflow: hidden;
        position: relative;
        .baui-tab-tool{
            position: absolute;
            cursor: pointer;
            line-height: 48px;
            font-size: 12px;
            color: #909399;
            z-index: 5;
        }
        .baui-tab-prev{
            left: 0px;
        }
        .baui-tab-next{
            right: 0px;
        }
        .baui-tab-nav-scoll{
            overflow: hidden;
        }
    }
    .baui-tab-wrap:after{
        content: "";
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 100%;
        height: 1px;
        background-color: #e4e7ed;
        z-index: 1;
    }
    .baui-tab-wrap.is-scoll{
        padding: 0 20px;
        box-sizing: border-box;
    }
    .baui-tab-header{
        box-sizing: border-box;
        overflow: hidden;
        white-space: nowrap;
        position: relative;
        transition: transform .3s;
        float: left;
        z-index: 2;
        li{
            display: inline-block;
            min-width: 64px;
            padding: 15px;
            position: relative;
            cursor: pointer;
        }
        li.baui-active:after{
            position: absolute;
            left: 0;
            top: 0;
            content: '';
            width: 100%;
            height: 45px;
            border-bottom:2px solid $color-primary;
            box-sizing: border-box;
            pointer-events: none;
            z-index: 2;
        }
        li.baui-active{
            color: $color-primary
        }
        li.baui-active a{
            color: $color-primary
        }
    }
    .baui-tab-content{
        padding: 20px;
    }
}
.baui-shadow{
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
}
